<template>
    <div class="addClass">
        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="50%"
            center
            :before-close="handleClose"
        >
            <div class="content">
                <el-form
                    ref="formBox"
                    :model="form"
                    :rules="rules"
                    label-width="80px"
                >
                    <el-form-item label="班级编号" prop="classId">
                        <el-input v-model="form.classId"></el-input>
                    </el-form-item>
                    <el-form-item label="班级名称" prop="className">
                        <el-input v-model="form.className"></el-input>
                    </el-form-item>
                    <el-form-item label="专业名称" prop="classMajor">
                        <el-select
                            v-model="form.classMajor"
                            placeholder="请选择专业"
                        >
                            <el-option
                                v-for="i in regionSel"
                                :key="i.majorNum"
                                :label="i.majorName"
                                :value="i.majorNum"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="班级人数" prop="classNum">
                        <el-input v-model="form.classNum"></el-input>
                    </el-form-item> -->

                    <el-form-item label="辅导员" prop="classInstructor">
                        <el-input v-model="form.classInstructor"></el-input>
                    </el-form-item>
                    <el-form-item label="开班日期" prop="classStartDate">
                        <!-- <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.classStareDate"
                            style="width: 100%"
                        ></el-date-picker> -->
                        <el-date-picker
                            v-model="form.classStartDate"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="学制" prop="classLength">
                        <el-radio-group v-model="form.classLength">
                            <el-radio label="0">三年</el-radio>
                            <el-radio label="1">四年</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="状态" prop="classStatus">
                        <el-radio-group v-model="form.classStatus">
                            <el-radio label="0">未开班</el-radio>
                            <el-radio label="1">开班</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sub(0)">取 消</el-button>
                <el-button type="primary" @click="sub(1)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addClassInfo, updateClassInfo } from "../../api/classApi";
export default {
    data() {
        return {
            centerDialogVisible: false,
            form: {
                classId: "",
                classMajor: "",
                className: "",
                // classNum: "",
                classInstructor: "",
                classStartDate: "",
                classLength: "",
                classStatus: "",
            },
            rules: {
                teacNum: [
                    {
                        required: true,
                        message: "请填写用户姓名",
                        trigger: "blur",
                    },
                ],
            },
            data: [],
            defaultProps: {
                children: "children",
                label: "label",
            },
            regionSel: [
                {
                    majorNum: "001",
                    majorName: "计算机",
                },
                {
                    majorNum: "002",
                    majorName: "音乐",
                },
                {
                    majorNum: "003",
                    majorName: "法律",
                },
            ],
        };
    },
    props: {
        isShow: {
            type: Boolean,
            default: false,
        },
        classInfo: {
            type: Object,
            default: null,
        },
    },
    watch: {
        isShow(n, o) {
            this.centerDialogVisible = n;
        },
        classInfo(n, o) {
            console.log(n);
            if (n == null) {
                this.form = {
                    teacNum: "",
                    teacName: "",
                    teacTitle: "",
                    teacCompile: "",
                    teacAge: "",
                };
            } else {
                n.isStatus = n.isStatus == "1" ? false : true;
                this.form = n;
            }
        },
    },
    created() {},
    methods: {
        //提交关闭按钮
        sub(t) {
            if (t == 1) {
                this.$refs.formBox.validate((valid) => {
                    if (valid) {
                        //加载
                        const loading = this.$loading({
                            lock: true,
                            text: "Loading",
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.7)",
                        });
                        // this.form.isStatus = this.form.isStatus ? "0" : "1";
                        // console.log(this.form);
                        // loading.close();
                        if (this.form.id == undefined || this.form.id == "") {
                            //添加
                            console.log(this.form);
                            addClassInfo(this.form).then((res) => {
                                console.log("add", res);
                                this.resetFun();
                                this.$emit("refreshBox");
                                loading.close();
                            });
                        } else {
                            //更新
                            updateClassInfo(this.form).then((res) => {
                                console.log("update", res);
                                this.resetFun();
                                this.$emit("refreshBox");
                                loading.close();
                            });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            } else {
                this.centerDialogVisible = false;
                this.$emit("show");
                console.log("no");
            }
        },
        handleClose(done) {
            this.centerDialogVisible = false;
            this.$emit("show");
        },
        //重置表单
        resetFun() {
            this.$refs.formBox.$el.reset();
            this.form.isStatus = true;
            this.centerDialogVisible = false;
            this.$emit("show");
        },
    },
};
</script>

<style lang="scss" scoped>
.addClass {
    .content {
        .el-form {
            .el-form-item:last-child {
                .el-tree {
                    max-height: 200px;
                    overflow: auto;
                    padding: 10px 0;
                }
            }
        }
    }
}
</style>
